<template>
  <view class="record-box">
    <view class="record-title">
      <text class="step">{{ step }}</text>
      <text :class="['level', statusInfo.class]">{{ statusInfo.text }}</text>
      <uv-icon class="arrow-right" name="arrow-right" size="14" bold color="#000"/>
    </view>
    <view class="result-text">
      {{ formattedValue }}
    </view>
    <view class="time-record">
      <view v-if="props.list.length" class="timer">
        {{ props.list[0]?.date || '暂无数据' }}
      </view>
	  <view  v-else class="record">去记录</view>
    </view>
  </view>
</template>

<script>
// 类型与单位映射策略
const unitStrategy = {
  temperature: { unit: '℃', format: v => `${v}℃` },
  weight: { unit: 'kg', format: v => `${v}kg` },
  heartRate: { unit: '次/分钟', format: v => `${v}次/分钟` },
  bloodSugar: { unit: 'mmol/L', format: v => `${v}mmol/L` },
  bloodPressure: { 
    unit: 'mmHg',
    format: v => `${v.systolic}/${v.diastolic}mmHg` 
  },
  bloodOxygen: { unit: '%', format: v => `${v}%` },
  bloodLipids: { unit: 'mmol/L', format: v => `${v}mmol/L` },
  steps: { unit: '步', format: v => `${v}步` }
}

// 类型名称映射（保留原有）
const typeStrategy = {
  temperature: '体温',
  weight: '体重',
  heartRate: '心率',
  bloodSugar: '血糖',
  bloodPressure: '血压',
  bloodOxygen: '血氧',
  bloodLipids: '血脂',
  steps: '步数'
}

export const strategyKeys = Object.keys(typeStrategy)
</script>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
    validator: value => value.every(item => 'value' in item)
  },
  title: {
    type: String,
    required: true,
    validator: value => strategyKeys.includes(value)
  }
})

// 带单位的格式化值
const formattedValue = computed(() => {
  if (!props.list.length) return '您还没有记录哦'
  
  const value = props.list[0].value
  const formatter = unitStrategy[props.title]?.format || (v => v)
  
  try {
    return formatter(value)
  } catch {
    return '数值格式异常'
  }
})

// 状态显示
const statusInfo = computed(() => ({
  text: props.list[0]?.status || '',
  class: {
    '正常': 'status-normal',
    '偏低': 'status-low',
    '危险': 'status-danger'
  }[props.list[0]?.status] || 'status-unknown'
}))

const step = computed(() => typeStrategy[props.title] ?? '未知指标')
</script>

<style lang="scss" scoped>
	
	// 状态颜色
	.status-normal { background-color: #039e6b !important }
	.status-low { background-color: #ffc107 !important}
	.status-danger { background-color: #dc3545 !important}
	.status-unknown { background-color: #f5f8ff}

	.record-box{
		width: 258rpx;
		height: 226rpx;
		background-color: #f5f8ff;
		border-radius: 15rpx;
		padding: 30rpx 20rpx 0;
		.record-title{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.step{
				font-size: 30rpx;
				font-weight: bold;
			}
			.level{
				background-color: #039e6b;
				margin-left: 20rpx;
				line-height: 1;
				color: #fff;
				padding: 6rpx;
				font-size: 24rpx;
				border-radius: 12rpx 12rpx 12rpx 0;
			}
			.arrow-right{
				margin-left: 44rpx;
			}
		}
		.result-text{
			font-size: 28rpx;
			color: #939599;
			&::after {
			  content: attr(data-unit);
			  font-size: 0.8em;
			  margin-left: 2px;
			}
		}
		.time-record{
			.record{
				margin-top: 24rpx;
				background-color: #f5f8ff;
				border: 1px solid #3f86ff;
				color: #3f86ff;
				width: 132rpx;
				height: 48rpx;
				line-height: 1;
				border-radius: 24rpx;
				font-size: 28rpx;
				font-weight: bold;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.timer{
				font-size: 24rpx;
				color: #7f7f7f;
				
			}
		}
	}
</style>